<template>
  <view class="artworks-container">
    <view
      class="artworks-item"
      @click="handleArtworks(artworksInfo)">
      <!-- #ifdef MP-TOUTIAO -->
      <image
        :lazy-load="true"
        :fade="false"
        :border-radius="0"
        :show-menu-by-longpress="false"
        :src="artworksInfo.type === 8 ? artworksInfo.video_cover_url : (artworksInfo.wx_cover_url || artworksInfo.cover_url + '?imageMogr2/auto-orient/thumbnail/!30p/blur/1x0/quality/80')"
        mode="aspectFill"
        class="image-item">
      </image>
      <!-- #endif -->
      <!-- #ifndef MP-TOUTIAO -->
      <u-image
        width="214rpx"
        height="150rpx"
        :lazy-load="false"
        :fade="false"
        :border-radius="0"
        :show-menu-by-longpress="false"
        :src="artworksInfo.type === 8 ? artworksInfo.video_cover_url : (artworksInfo.wx_cover_url || artworksInfo.cover_url + '?imageMogr2/auto-orient/thumbnail/!30p/blur/1x0/quality/80')"
        class="image-itme"
        mode="aspectFill">
        <u-loading slot="loading" color="#7275fb" size="36"></u-loading>
      </u-image>
      <!-- #endif -->
      <image
        v-if="artworksInfo.type === 8"
        src="@/static/image/play.png"
        mode="scaleToFill"
        class="play-icon"
      />
      <!-- 状态显示 -->
      <view v-if="artworksInfo.audit_status !== 'success'" class="show-status-container">
        <text v-if="artworksInfo.audit_status === 'review'">审核中</text>
        <text v-else-if="artworksInfo.audit_status === 'reject'">已拒绝</text>
      </view>
      <!-- 状态显示 -->
      <!-- 置顶 -->
      <view v-if="showTop && artworksInfo.is_top == 1" class="is_top">
        <text>置顶</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    artworksInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {
    handleArtworks(rowDta) {
      if (rowDta.audit_status === 'success') {
        this.$emit('handleArtworks', rowDta);
      }
    }
  }
}
</script>

<style lang="scss">
  .artworks-container{
    display: flex;
    flex-wrap: wrap;

    .artworks-item{
      width: 100%;
      margin-bottom: 24rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      background: rgba($color: #fff, $alpha: .2);
      border: 2rpx solid #fff;
      height: 154rpx;

      .image-item{
        width: 214rpx;
        height: 150rpx;
      }

      .show-status-container{
        background: #000;
        color: #fff;
        width: 100%;
        height: 100%;
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 1;
        top: 0;
        color: #fff;
        border-radius: 8rpx 0 8rpx 0;
        background-color: $uni-color-primary2;
      }

      .play-icon{
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .5);
      }
    }

    .artworks-item:nth-child(3n - 1) {
      margin-right: 3.5%;
      margin-left: 3.5%;
    }
  }
</style>
